<template>
  <div class="project">
    <!-- 在线调试  -->
    <div class="wrapper">
      <div class="wb_header">
        <div>在线调试</div>
      </div>
      <div class="warp warp1">
        <el-form :inline="true" :model="queryFrom" class="demo-form-inline" label-width="16px">
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择产品">
              <el-option :label="item.label" :value="item.value" v-for="item in productList" :key="item.value"></el-option> 
            </el-select>
          </el-form-item>
          <el-form-item label=" "> 
            <el-popover placement="top-start" width="200" title="温馨提示" trigger="hover" content="请至少输入4位数关键字查询;可输入设备sn、设备名称">
              <el-input slot="reference" size="small" placeholder="输入关键字查询设备" suffix-icon="el-icon-search" v-model="queryFrom.input1"/>
            </el-popover> 
          </el-form-item>  
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择产品">
              <el-option :label="item.label" :value="item.value" v-for="item in optionList" :key="item.value"></el-option> 
            </el-select>
          </el-form-item>
          <el-form-item label=" "> 
            <el-button type="primary" size="small">发送指令</el-button>
          </el-form-item> 
        </el-form> 
      </div> 
      <div class="center">
        <div class="wrap left">
          <div class="title">填写参数</div>
        </div>
        <div class="wrap right"> 
          <div class="title">内容预览</div>
        </div>
        <div class="right">  
          <div class="title">指令回复</div>
          <el-button type="text">查看指令历史记录</el-button>
          <ul class="zlhf">
            <li>apiKey：</li>
            <li>指令请求内容：</li>
            <li>请求时间：</li>
            <li>指令返回内容：</li>
            <li>返回时间：</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
data() {
  return {
    queryFrom: {},
    loading: false,
    configList: [{}],
    total: 1,
    queryParams:{
      pageNum: 1,
      pageSize: 10,
    },
    productList: [
      {label: "标准普适型设备", value: "标准普适型设备"},
      {label: "普适型裂缝", value: "普适型裂缝"},
      {label: "普适型-倾角", value: "普适型-倾角"},
      {label: "普适型-振动", value: "普适型-振动"},
      {label: "普适型-雨量", value: "普适型-雨量"},
      {label: "普适型-气温", value: "普适型-气温"},
      {label: "普适型-气压", value: "普适型-气压"}, 
      {label: "普适型-预警喇叭", value: "普适型-预警喇叭"},
      {label: "普适型-地表位移", value: "普适型-地表位移"},
      {label: "普适型-地表位移基站", value: "普适型-地表位移基站"},
      {label: "普适型-加速度", value: "普适型-加速度"},
      {label: "普适型泥位计", value: "普适型泥位计"},
      {label: "普适型-土壤温度", value: "普适型-土壤温度"},
      {label: "普适型-土壤含水率", value: "普适型-土壤含水率"},
      {label: "普适型-视频", value: "普适型-视频"},
      {label: "普适型地下水位计", value: "普适型地下水位计"},
      {label: "普适型深部位移计", value: "普适型深部位移计"},
      {label: "普适型次声仪", value: "普适型次声仪"},
      {label: "磁悬浮检波器", value: "磁悬浮检波器"},
      {label: "激光雷达测距仪", value: "激光雷达测距仪"},
      {label: "北斗三短报文终端", value: "北斗三短报文终端"},
    ],
    optionList: []
  }
},
methods:{
  getList(){}, 
}
}
</script>

<style scoped>
@import "~@/assets/styles/tablePage.scss";
</style>